<template>
  <el-row>
     <el-form label-width="145px" :model="form" ref="form" :rules="rules" size="small">
      <el-form-item label="通道状态：">
        <span class="fz12" :class="enter_status === -200 || enter_status === -100 || enter_status === 313 || enter_status === 913 ? 'err' : 'tip'">{{ enter_status === -200 ? '审核未通过' : enter_status === -100 ? '入驻失败' : enter_status ===  0 ? '资料提审' : enter_status === 101 ? '已初审，待入驻' : enter_status === 100 ? '入驻中' : enter_status === 200 ? '已入驻' : enter_status === 311 ? '等待配置支付通道' : enter_status === 312 ? '部分支付通道配置成功' : enter_status === 313 ? '支付通道配置失败' : enter_status === 310 ? '支付通道配置成功' : enter_status === 500 ? '完成' : enter_status === 900 ? '申请修改信息' : enter_status === 901 ? '信息修改中' : enter_status === 910 ? '申请修改费率' : enter_status === 911 ? '费率修改中' : enter_status === 912 ? '费率修改完成' : enter_status === 913 ? '费率修改失败' : '无' }}</span>
      </el-form-item>
      <el-form-item label="错误信息：" v-if="enter_status === -200 || enter_status === -100 || enter_status === 313 || enter_status === 913">
        <span class="fz12 err">{{ error_info }}</span>
      </el-form-item>
      <el-form-item label="商户类别：" prop="industry">
        <el-select :disabled="disabled === -200 ? false : true" v-model="form.industry" placeholder="" class="w200" clearable>
          <el-option v-for="item in options"
            :key="item.mcc_cd"
            :label="item.sup_mcc_nm + '/' + item.mcc_typ_nm + '/' + item.mcc_nm"
            :value="item.mcc_cd">
          </el-option>
        </el-select>
        <el-button v-if="btn_industry" type="warning" size="small" @click="handleClickGetIndustry" :loading="industry_loading">重新获取</el-button>
      </el-form-item>
      <el-form-item label="注册省市：" prop="area">
        <el-cascader :disabled="disabled === -200 ? false : true" :options="address" v-model="form.area" class="w200" :props="props">
        </el-cascader>
      </el-form-item>
        <el-form-item label="详细地址：" prop="address">
          <el-input :disabled="disabled === -200 ? false : true" v-model="form.address" class="w200" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="渠道选择：" required>
          <el-button :disabled="disabled === -200 ? false : true" type="warning" size="small">T+1</el-button>
        </el-form-item>
        <el-form-item label="D+0到账：">
          <el-switch :disabled="disabled === -200 ? false : true" v-model="form.d0_cash" active-color="#13ce66" active-text="需要手动提现并支付提现手续费" v-if="!D0_status"></el-switch>
          <span v-if="D0_status">未开通</span> 
          <el-button type="primary" size="small" v-if="D0_status" @click="handleClickOnOpenD0">申请开通</el-button>
        </el-form-item>
        <el-form-item label="配置POS机支付：">
          <el-switch :disabled="disabled === -200 || siwtch_type !==3 ? false : true" v-model="form.card_type" active-color="#13ce66" @change="handleChangeSwith"></el-switch>
        </el-form-item>
        <el-row>
          <label class="el-form-item__label" style="width: 145px;">证件照片：</label>
            <el-form-item style="display: inline-block;" class="mr10" prop="channel_starpos_agreement" label-width="0">
              <el-upload :disabled="disabled === -200 || siwtch_type !==3 ? false : true" class="uploader" :action="url" :before-upload="beforeUpload" :on-success="channelStarposAgreement" :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="form.channel_starpos_agreement" :src="form.channel_starpos_agreement" alt="">
                <img v-else src="https://mat.uphicoo.com/049c1842-9571-11e8-950e-10bf48e1a920.jpg" alt="">
                <span class="fz12"><span class="err">*</span>商户协议</span>
              </el-upload>
            </el-form-item>
            <el-form-item style="display: inline-block;" class="mr10" prop="channel_starpos_mch_info" label-width="0">
              <el-upload :disabled="disabled === -200 || siwtch_type !==3 ? false : true" class="uploader" :action="url" :before-upload="beforeUpload" :on-success="channelStarposMchInfo" :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="form.channel_starpos_mch_info" :src="form.channel_starpos_mch_info" alt="">
                <img v-else src="https://mat.uphicoo.com/39db604e-916b-11e8-ba3b-10bf48e1a920.jpg" alt="">
                <span class="fz12"><span class="err">*</span>商户信息表</span>
              </el-upload>
            </el-form-item>
            <el-form-item style="display: inline-block;" class="mr10" label-width="0">
              <el-upload :disabled="disabled === -200 || siwtch_type !==3 ? false : true" class="uploader" :action="url" :before-upload="beforeUpload" :on-success="channelStarposStofc" :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="form.channel_starpos_stofc_payee" :src="form.channel_starpos_stofc_payee" alt="">
                <img v-else src="https://mat.uphicoo.com/6c2f2464-93c2-11e8-821f-10bf48e1a920.jpg" alt="">
                <span class="fz12">
                  <el-tooltip content="小微商户必传" placement="bottom" effect="dark">
                    <span>结算人站门头照</span>
                  </el-tooltip>
                </span>
              </el-upload>
            </el-form-item>
            <el-form-item style="display:inline-block" label-width="0" class="mr10">
              <el-upload :disabled="disabled === -200 || siwtch_type !==3 ? false : true" class="uploader" :action="url" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleUploadSuccBankCerti">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="form.ch_spos_certi" :src="form.ch_spos_certi" alt="">
                <img v-else src="https://mat.uphicoo.com/c3ceaf1e-916a-11e8-a3b8-10bf48e1a920.jpg" alt="">
                <span class="fz12">授权书</span>
              </el-upload>
            </el-form-item>
        
            <el-form-item style="display:inline-block" label-width="0" class="mr10">
              <el-upload :disabled="disabled === -200 || siwtch_type !==3 ? false : true" class="uploader" :action="url" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleUploadSuccbankCardInhand">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="form.ch_spos_certi_inhand" :src="form.ch_spos_certi_inhand" alt="">
                <img v-else src="https://mat.uphicoo.com/f46e48b6-93cf-11e8-8085-10bf48e1a920.jpg" alt="">
                <span class="fz12">授权协议手持合照</span>
              </el-upload>
            </el-form-item>
        </el-row>
      <el-col style="border:1px solid #333;" v-if="form.card_type">
        <h4 style="padding-left:15px;">POS机支付</h4>
        <el-form-item label="借记卡费率：" prop="credit">
          <el-input :disabled="disabled === -200 || siwtch_type !==3 ? false : true" class="w200" v-model.number="form.credit" placeholder="" :maxlength="4"></el-input>%
        </el-form-item>
        <el-form-item label="封顶金额：" prop="pos_debit_max">
          <el-input :disabled="disabled === -200 || siwtch_type !==3 ? false : true" class="w200" v-model.number="form.pos_debit_max" placeholder=""></el-input>元
        </el-form-item>
        <el-form-item label="贷记卡费率：" prop="debit">
          <el-input :disabled="disabled === -200 || siwtch_type !==3 ? false : true" v-model.number="form.debit" placeholder="" class="w200" :maxlength="4"></el-input>%
        </el-form-item>
        <el-form-item label="支持双免：">
          <el-checkbox :disabled="disabled === -200 || siwtch_type !==3 ? false : true" v-model="form.is_supt_dbfree_flg">小额免密支付</el-checkbox>
        </el-form-item>
        <el-form-item label="交易卡种：" prop="supt_card">
          <el-checkbox-group :disabled="disabled === -200 || siwtch_type !==3 ? false : true" v-model="form.supt_card">
            <el-checkbox v-for="item in cards" :key="item.key" :label="item.key">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="交易类型：" prop="tran_types">
          <el-checkbox-group :disabled="disabled === -200 || siwtch_type !==3 ? false : true" v-model="form.tran_types">
            <el-checkbox v-for="item in items" :key="item.key" :label="item.key">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="终端数量：" prop="trm_num">
          <el-input :disabled="disabled === -200 || siwtch_type !==3 ? false : true" class="w200" v-model.number="form.trm_num" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="终端编号：" v-if="sp_trm_nos > 0">
          <el-tooltip placement="right" effect="dark">
            <span v-for="item in sp_trm_nos.slice(0,4)" :key="item">{{ item }}</span>
            <div slot="content">
              <p v-for="item in sp_trm_nos" :key="item">{{ item }}</p>
            </div>
            <!-- content to trigger tooltip here -->
          </el-tooltip>
          
        </el-form-item>
        
      </el-col>
      <el-col  style="border:1px solid #333;" class="mt20">
        <h4 style="padding-left:15px;">移动支付</h4>
        <el-form-item label="移动支付签约费率：" prop="scan">
          <el-input :disabled="disabled === -200 ? false : true" class="w200" v-model.number="form.scan" placeholder="" :maxlength="4"></el-input>% <span class="err fz12">（支付宝、微信）</span>
        </el-form-item>
        <el-form-item label="银联二维码标准费率：" prop="unionpay_dis">
          <el-input :disabled="disabled === -200 ? false : true" class="w200" v-model.number="form.unionpay_dis" placeholder="" :maxlength="4"></el-input>% <span class="err fz12">（收款金额≥1000元）</span>
        </el-form-item>
        <el-form-item label="银联二维码优惠费率：" prop="unionpay_sta">
          <el-input :disabled="disabled === -200 ? false : true" class="w200" v-model.number="form.unionpay_sta" placeholder="" :maxlength="4"></el-input>% <span class="err fz12">（收款金额&lt;1000元）</span>
        </el-form-item>
        <el-form-item v-if="disabled === -200 || siwtch_type !==3">
          <el-button type="primary" @click="handleClickOnSubmit" size="small" :loading="btnSubmit">提交审核</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import { merchanenlChannelMainlandCategory, merchantChannelMainlanQuery, merchantChannelMainlanUpdate, merchantChannelD0Open } from '@/api/shop'

export default {
  data() {
    return {
      disabled: 100,
      D0_status: false,
      btn_industry: false,
      industry_loading: false,
      btnSubmit: false,
      siwtch_type: null,
      enter_status: null,
      error_info: '',
      sp_trm_nos: [],
      items: [
        { key: 'C1', label: '消费' },
        { key: 'C2', label: '消费撤销' },
        { key: 'C3', label: '预授权' },
        { key: 'C4', label: '预授权完成' },
        { key: 'C5', label: '预授权撤销' },
        { key: 'C6', label: '预授权完成撤销' },
        { key: 'C7', label: '余额查询' }
      ],
      cards: [
        { key: 1, label: '借记卡' },
        { key: 0, label: '贷记卡' }
      ],
      flgs: [{ key: 1, label: '小额免密支付' }],
      options: [{ value: 1, label: 2 }],
      form: {
        area: [],
        tran_types: ['C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7'],
        supt_card: [1, 0],
        trm_num: '',
        scan: '',
        unionpay_dis: '',
        industry: '',
        channel_starpos_mch_info: '',
        channel_starpos_stofc_payee: '',
        unionpay_sta: '',
        is_supt_dbfree_flg: true,
        channel_starpos_agreement: '',
        ch_spos_certi_inhand: '',
        ch_spos_certi: '',
        debit: '',
        credit: '',
        pos_debit_max: '',
        balance_type: 'T1',
        address: '',
        d0_cash: '',
        card_type: false
      },
      rules: {
        trm_num: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        scan: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        area: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        industry: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        d0_cash: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        address: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        credit: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        pos_debit_max: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        debit: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        is_supt_dbfree_flg: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        supt_card: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        tran_types: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        channel_starpos_mch_info: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        channel_starpos_stofc_payee: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        ch_spos_certi: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        ch_spos_certi_inhand: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        channel_starpos_agreement: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        unionpay_dis: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        unionpay_sta: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }]
      },
      props: {
        value: 'code',
        label: 'alias',
        children: 'city'
      },
      url: process.env.BASE_API + '/merchant/uploadCommer'
    }
  },
  props: {
    address: {
      required: true,
      type: Array
    }
  },
  methods: {
    handleClickGetIndustry() {
      this.industry_loading = true
      merchanenlChannelMainlandCategory().then(res => {
        if (res.data.errorCode === 0) {
          this.options = res.data.result
          this.btn_industry = false
          this.industry_loading = false
        } else {
          this.$message.error(res.data.errorMsg)
          this.btn_industry = true
          this.industry_loading = false
        }
      })
    },
    handleDocumentInit() {
      merchantChannelMainlanQuery(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.disabled = res.data.result.channel_status
          this.form.industry = res.data.result.industry
          this.form.area = res.data.result.area.code
          this.form.address = res.data.result.address
          this.form.scan = Number(res.data.result.scan)
          this.form.balance_type = res.data.result.balance_type
          this.form.d0_cash = res.data.result.d0_cash
          this.form.debit = Number(res.data.result.credit)
          this.form.credit = Number(res.data.result.debit)
          this.form.pos_debit_max = res.data.result.pos_debit_max
          this.form.is_supt_dbfree_flg = res.data.result.is_supt_dbfree_flg
          this.form.support_currency = res.data.result.support_currency
          this.form.supt_card = res.data.result.support_card
          this.sp_trm_nos = res.data.result.sp_trm_nos
          this.form.tran_types = res.data.result.tran_types.code
          this.form.channel_starpos_agreement = res.data.result.photo.channel_starpos_agreement
          this.form.channel_starpos_stofc_payee = res.data.result.photo.channel_starpos_stofc_payee
          this.form.channel_starpos_mch_info = res.data.result.photo.channel_starpos_mch_info
          this.form.ch_spos_certi_inhand = res.data.result.photo.ch_spos_certi_inhand
          this.form.ch_spos_certi = res.data.result.photo.ch_spos_certi
          this.form.trm_num = res.data.result.trm_num
          this.form.unionpay_dis = Number(res.data.result.unionpay_sta)
          this.form.unionpay_sta = Number(res.data.result.unionpay_dis)
          this.enter_status = res.data.result.enter_status.code
          this.error_info = res.data.result.enter_status.error_info
          res.data.result.card_type === 1 ? this.form.card_type = false : res.data.result.card_type === 3 ? this.form.card_type = true : ''
          this.siwtch_type = res.data.result.card_type
        } else {
          this.disabled = -200
        }
      })
    },
    handleClickOnSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnSubmit = true
          merchantChannelMainlanUpdate(this.$route.query.merchant_num, this.form).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.disabled = 100
              this.btnSubmit = false
            } else {
              this.$message.error(res.data.errorMsg)
              this.btnSubmit = false
            }
          })
        }
      })
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！!')
      }
      return isJPG && isLt2M
    },
    channelStarposAgreement(file) {
      this.form.channel_starpos_agreement = file.result
    },
    channelStarposMchInfo(file) {
      this.form.channel_starpos_mch_info = file.result
    },
    channelStarposStofc(file) {
      this.form.channel_starpos_stofc_payee = file.result
    },
    handleUploadSuccBankCerti(file) {
      this.form.ch_spos_certi = file.result
    },
    handleUploadSuccbankCardInhand(file) {
      this.form.ch_spos_certi_inhand = file.result
    },
    handleClickOnOpenD0() {
      merchantChannelD0Open(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.$message.success(res.data.errorMsg)
          this.D0_status = false
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleChangeSwith(v) {
      this.form.credit = ''
      this.form.pos_debit_max = ''
      this.form.debit = ''
      this.form.trm_num = ''
      this.form.channel_starpos_agreement = ''
      this.form.channel_starpos_mch_info = ''
      this.form.channel_starpos_stofc_payee = ''
      this.form.ch_spos_certi = ''
      this.form.ch_spos_certi_inhand = ''
    }
  },
  created() {
    this.handleClickGetIndustry()
    this.handleDocumentInit()
  }
}
</script>